<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		<div>
			<h3>用户新增</h3>
			姓名:<input type="text"v-model="addUser.name" />
			年龄:<input type="text"v-model="addUser.age" />
			性别:<input type="text"v-model="addUser.sex" />
			<button @click="addUserBtn">新增</button>
		</div>
		
		<div>
		
		</div>
		
		<div>
			<p>
			 编号:	<input type="text" disabled v-model="Update.id"/>
			 姓名:  <input type="text" v-model="Update.name"/>
			</p>
			<p>
			 年龄:	<input type="text" v-model="Update.age"/>
			 性别:  <input type="text" v-model="Update.sex"/>
			 <button @click="updateUser">提交修改</button>
			</p>
		</div>
		
		<div>
			<table border="1px" align="center" width="80%">
				<tr align="center">
					<th colspan="5">
						<h3>用户列表</h3>
					</th>
				</tr>
				<tr align="center">
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<tr align="center" v-for="user in userList">
					<th v-text="user.id"></th>
					<th v-text="user.name"></th>
					<th v-text="user.age"></th>
					<th v-text="user.sex"></th>
			        <th width="20%">
						<button @click="updateuser(user)">修改</button>
						<button @click="deleteUser(user)">删除</button>
					</th>
				</tr>
			</table>
		</div>
		
		</div>
		
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
		axios.defaults.baseURL="http://localhost:8090/vue"
		const app=new Vue({
			el:"#app",
			data:{
				userList:[],
				addUser:{
					name:'',
					age:'',
					sex:''
				},
				Update:{
					id:'',
					name:'',
					age:'',
					sex:''
				}
				
			},
			methods:{
				async getUserList(){
				   let {data:result}=await axios.get("/findALl")
				   this.getUserList()=Promise.data
				},
				async deleteUser(user){
				   let {data:result}=await axios.delete("/deletebyId?id="+user.id)
				   alert(Promise.data)
				   this.getUserList()
				},
				async addUserBtn(){
					let {data:result}=await axios.post("/Saveuser",this.addUser)
					alert(Promise.data)
					this.getUserList()
					this.addUser={}
				},
				updateuser(user){
					this.Update=user
				},
				async updateUser(){
				    let {data:result}= await axios.put("/updateuser",this.Update)
					alert(result)
					this.getUserList()
					this.Update={}
				}
			},
			created(){
				this.getUserList()
			}
		})
		</script>
	</body>
</html>
